<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            p {
                line-height: 1.5;
                margin: 0;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        Card
    </ui:define>

    <ui:define name="description">
        Card is a flexible container component.
    </ui:define>

    <ui:param name="documentationLink" value="/components/card"/>

    <ui:define name="implementation">

        <p:card style="width: 25rem; margin-bottom: 2em">
            <f:facet name="title">
                Simple Card
            </f:facet>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>

        </p:card>

        <p:card style="width: 25em">
            <f:facet name="header">
                <img alt="user header" src="../../resources/demo/images/usercard.png"/>
            </f:facet>
            <f:facet name="title">
                Advanced Card
            </f:facet>
            <f:facet name="subtitle">
                Card subtitle
            </f:facet>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>

            <f:facet name="footer">
                <p:commandButton icon="pi pi-check" value="Save"/>
                <p:commandButton icon="pi pi-times" value="Cancel" styleClass="ui-button-secondary" style="margin-left: .5em"/>
            </f:facet>
        </p:card>

    </ui:define>

</ui:composition>
